/* Login.module.css */
.loginPage {
    display: flex;
    justify-content: flex-start; /* 内容靠左 */
    align-items: center; /* 垂直居中 */
    height: 85.6vh; /* 使容器全高 */
    width: 100%; /* 使容器全宽 */
    margin: 0; /* 去除默认边距 */
    background-size: cover;
}

.loginContainer {
    max-width: 350px; /* 最大宽度 */
    width: 100%; /* 对于小屏幕可响应 */
    padding: 20px;
    border-radius: 20px;
    margin-top: -60px;
    height: 450px;
    margin-left: 200px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
}

h2 {
    text-align: center;
    font-size: 28px;
    color: #23153C;
}

.tabButtons {
    display: flex;
    justify-content: flex-start; /* 将菜单项对齐到左边 */
    cursor: pointer; /* 添加手形光标 */
    gap: 20px; /* 菜单项之间的间距 */
    align-items: center; /* 垂直居中对齐 */
    margin-bottom: 20px; /* 菜单项之间的间距 */
}

.tabButton {
    padding: 10px 15px 3px 0;
    position: relative; /* 使伪元素相对于菜单项定位 */
    margin-bottom: 10px;
}

.tabButton:hover {
    color: #b2a0d6; /* 悬停时的颜色变化 */
}

.tabButton.active::after {
    content: '';
    position: absolute;
    left: 50%; /* 水平居中 */
    bottom: -5px; /* 距离文本底部的位置 */
    width: 60%; /* 与菜单项宽度一致 */
    height: 2px; /* 下划线的高度 */
    background-color: #b2a0d6; /* 下划线颜色 */
    transform: translateX(-50%); /* 根据宽度进行水平居中 */
}

.inputRow {
    margin-top: 20px;
    display: flex; /* 使用 flexbox 使标签和输入框在同一行显示 */
    align-items: center; /* 垂直居中对齐 */
    margin-bottom: 5px; /* 调整间距 */
}

.inputLabel {
    width:80px;
    margin-right: 5px;
    font-size: 14px;
    color: #777;
}

.inputArea{
    display: flex;
    flex-grow: 1;
}

.inputField {
    flex-grow: 1; /* 让 input 扩展以填充剩余空间 */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 16px;
    outline: none;
    margin-left: -10px;
    transition: border-color 0.2s;
}

.inputField:focus {
    border-color: #ab78d5; /* 聚焦时边框颜色 */
}

.errorRow {
    display: flex; /* 使用 flexbox 使错误信息在同一行显示 */
    align-items: center; /* 垂直居中对齐 */
    height: 15px; /* 固定高度 */
    margin-bottom: 5px; /* 调整错误信息与输入框之间的间距 */
    margin-left: 85px; /* 距离左边固定的距离（可以根据需要调整） */
}

.errorMessage {
    text-align: center; /* 错误信息居中 */
    color: red;
    font-size: 0.875em; /* 较小的字体运用 */
    height: 100%; /* 固定高度 */
}

.serverErrorContainer {
    height: 20px; /* 固定高度 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    margin-bottom: 5px;
}

.serverErrorMessage {
    color: rgb(216, 66, 66); /* 错误信息的颜色 */
    text-align: center; /* 文字居中 */
}

.rememberMeContainer {
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中 */
    margin-top: 30px; /* 调整间距 */
    margin-bottom: -30px;
    font-size: 15px;
}

input[type="checkbox"] {
    transform: scale(1.5); /* 根据需要调整比例 */
}

.rememberMeLabel {
    margin-left: 8px; /* 为标签增加左边距，和复选框保持一些间隔 */
}

.forgotPasswordLink {
    color: #5b4a7d;
    text-decoration: none; /* 去掉下划线 */
    cursor: pointer;
    margin-left: auto; /* 将忘记密码链接推到右侧 */
}

button {
    width: 100%;
    padding: 10px;
    background-color:#5b4a7d ;
    color: white;
    border: none;
    font-size: 17px;
    border-radius: 16px;
    margin-top: -5px;
    cursor: pointer;
}

button:hover {
    background-color: #b2a0d6; /* 鼠标悬停时背景颜色 */
}

.sendVerificationCodeButton{
    padding: 0;
    width: 80px;
    height: 43px;
    margin-left: 10px;
    font-size: 13px;
}

.sendVerificationCodeButton.disabled {
    background-color: #ccc; /* 禁用时的背景色 */
    color: #666; /* 禁用时的文本颜色 */
    cursor: not-allowed; /* 更改鼠标指针形状 */
    opacity: 0.65; /* 减少透明度 */
}

.registerLink {
    margin-top: 50px;
    text-align: center; /* 注册链接居中 */
}

.registerText {
    color: #5b4a7d;
    font-size: 15px;
    text-decoration: underline;
    cursor: pointer;
}

.registerText:hover {
    color: #b2a0d6; /* 悬停时颜色变化 */
}

.successMessage {
    position: absolute; /* 或者使用你想要的位置 */
    top: 20px; /* 根据需要调整 */
    left: 50%;
    transform: translateX(-50%);
    background-color: #4caf50; /* 绿色背景 */
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 1000; /* 确保在其他元素之上 */
}
